<template>
  <div style="margin: 20px; margin-top: 60px">
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <!--设备的级联选择器-->
        <!--这个device 提交的是数组信息暂时屏蔽
      v-model="queryParams.device"-->
        <el-form-item label="仪器" prop="device">
          <el-cascader placeholder="请选择设备" :options="options" filterable />
        </el-form-item>
        <el-form-item label="日期选择" prop="createTime">
          <el-date-picker
            v-model="createTime"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
            type="date"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        </el-form-item>
      </el-form>
      <div style="margin-top: 10px">
        <el-tabs v-model="activeNames" @tab-click="handleClicks">
          <el-tab-pane label="日报表" name="days">
            <div>
              <div style="font-size: 20px; font-weight: bold">固井仪器</div>
              <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
                <el-table-column prop="type" label="应用类型" />
                <el-table-column prop="time0" label="0时" />
                <el-table-column prop="time1" label="1时" />
                <el-table-column prop="time2" label="2时" />
                <el-table-column prop="time3" label="3时" />
                <el-table-column prop="time4" label="4时" />
                <el-table-column prop="time5" label="5时" />
                <el-table-column prop="time6" label="6时" />
                <el-table-column prop="time7" label="7时" />
                <el-table-column prop="time8" label="8时" />
                <el-table-column prop="time9" label="9时" />
                <el-table-column prop="time10" label="10时" />
                <el-table-column prop="time11" label="11时" />
              </el-table>
              <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
                <el-table-column prop="type" label="应用类型" />
                <el-table-column prop="time12" label="12时" />
                <el-table-column prop="time13" label="13时" />
                <el-table-column prop="time14" label="14时" />
                <el-table-column prop="time15" label="15时" />
                <el-table-column prop="time16" label="16时" />
                <el-table-column prop="time17" label="17时" />
                <el-table-column prop="time18" label="18时" />
                <el-table-column prop="time19" label="19时" />
                <el-table-column prop="time20" label="20时" />
                <el-table-column prop="time21" label="21时" />
                <el-table-column prop="time22" label="22时" />
                <el-table-column prop="time23" label="23时" />
              </el-table>

              <div style="font-size: 20px; font-weight: bold; margin-top: 30px">固井仪器</div>
              <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
                <el-table-column prop="type" label="应用类型" />
                <el-table-column prop="time0" label="0时" />
                <el-table-column prop="time1" label="1时" />
                <el-table-column prop="time2" label="2时" />
                <el-table-column prop="time3" label="3时" />
                <el-table-column prop="time4" label="4时" />
                <el-table-column prop="time5" label="5时" />
                <el-table-column prop="time6" label="6时" />
                <el-table-column prop="time7" label="7时" />
                <el-table-column prop="time8" label="8时" />
                <el-table-column prop="time9" label="9时" />
                <el-table-column prop="time10" label="10时" />
                <el-table-column prop="time11" label="11时" />
              </el-table>
              <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
                <el-table-column prop="type" label="应用类型" />
                <el-table-column prop="time12" label="12时" />
                <el-table-column prop="time13" label="13时" />
                <el-table-column prop="time14" label="14时" />
                <el-table-column prop="time15" label="15时" />
                <el-table-column prop="time16" label="16时" />
                <el-table-column prop="time17" label="17时" />
                <el-table-column prop="time18" label="18时" />
                <el-table-column prop="time19" label="19时" />
                <el-table-column prop="time20" label="20时" />
                <el-table-column prop="time21" label="21时" />
                <el-table-column prop="time22" label="22时" />
                <el-table-column prop="time23" label="23时" />
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="月报表" name="month">
            <div>
              <div style="font-size: 20px; font-weight: bold">固井仪器</div>
              <el-table :data="tableData1" border style="width: 100%; margin-top: 20px">
                <el-table-column prop="type" label="应用类型" />
                <el-table-column prop="time1" label="01日" />
                <el-table-column prop="time2" label="02日" />
                <el-table-column prop="time3" label="03日" />
                <el-table-column prop="time4" label="04日" />
                <el-table-column prop="time5" label="05日" />
                <el-table-column prop="time6" label="06日" />
                <el-table-column prop="time7" label="07日" />
                <el-table-column prop="time8" label="08日" />
                <el-table-column prop="time9" label="09日" />
                <el-table-column prop="time10" label="10日" />
                <el-table-column prop="time11" label="11日" />
                <el-table-column prop="time12" label="12日" />
                <el-table-column prop="time13" label="13日" />
                <el-table-column prop="time14" label="14日" />
                <el-table-column prop="time15" label="15日" />
              </el-table>
              <el-table :data="tableData1" border style="width: 100%; margin-top: 20px">
                <el-table-column prop="type" label="应用类型" />
                <el-table-column prop="time16" label="16日" />
                <el-table-column prop="time17" label="17日" />
                <el-table-column prop="time18" label="18日" />
                <el-table-column prop="time19" label="19日" />
                <el-table-column prop="time20" label="20日" />
                <el-table-column prop="time21" label="21日" />
                <el-table-column prop="time22" label="22日" />
                <el-table-column prop="time23" label="23日" />
                <el-table-column prop="time24" label="24日" />
                <el-table-column prop="time25" label="25日" />
                <el-table-column prop="time26" label="26日" />
                <el-table-column prop="time27" label="27日" />
                <el-table-column prop="time28" label="28日" />
                <el-table-column prop="time29" label="29日" />
                <el-table-column prop="time30" label="30日" />
                <!-- <el-table-column prop="time31" label="31时"  /> -->
              </el-table></div
            >
          </el-tab-pane>
          <el-tab-pane label="年报表" name="year">
            <div>
              <div style="font-size: 20px; font-weight: bold">固井仪器</div>
              <el-table :data="tableData2" border style="width: 100%; margin-top: 20px">
                <el-table-column prop="type" label="应用类型" />
                <el-table-column prop="time1" label="1月" />
                <el-table-column prop="time2" label="2月" />
                <el-table-column prop="time3" label="3月" />
                <el-table-column prop="time4" label="4月" />
                <el-table-column prop="time5" label="5月" />
                <el-table-column prop="time6" label="6月" />
                <el-table-column prop="time7" label="7月" />
                <el-table-column prop="time8" label="8月" />
                <el-table-column prop="time9" label="9月" />
                <el-table-column prop="time10" label="10月" />
                <el-table-column prop="time11" label="11月" />
                <el-table-column prop="time12" label="12月" />
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </ContentWrap>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const createTime = ref('')
const queryParams = ref({
  device: undefined,
  createTime: undefined
})
const activeNames = ref('days')
const options = [
  {
    value: 'zhljy',
    label: '综合录井仪型号',
    children: [
      {
        value: 'sk2000',
        label: 'SK2000'
      },
      {
        value: 'skq',
        label: 'SKQ'
      },
      {
        value: 'skc',
        label: 'SKC'
      },
      {
        value: 'sk_cms',
        label: 'SK-CMS'
      },
      {
        value: 'sk_2000fc',
        label: 'SK-2000FC'
      },
      {
        value: 'sk2000',
        label: 'SK2000'
      },
      {
        value: 'dql',
        label: 'DQL'
      },
      {
        value: 'cms',
        label: 'CMS'
      },
      {
        value: 'smart',
        label: 'SMART'
      },
      {
        value: 'dqdc_fc',
        label: 'DQDC-FC'
      },
      {
        value: 'dql_d',
        label: 'DQL-D'
      },
      {
        value: 'dml',
        label: 'dml'
      },
      {
        value: 'sf_3000',
        label: 'SF-3000'
      },
      {
        value: 'wellstar',
        label: 'WELLSTAR'
      }
    ]
  },
  {
    value: 'zjcsy',
    label: '钻井参数仪型号',
    children: []
  },
  {
    value: 'szcl_lwd',
    label: '随钻测量LWD型号',
    children: [
      {
        value: 'bench_tree',
        label: 'Bench Tree'
      },
      {
        value: 'hlbd',
        label: '哈里伯顿'
      },
      {
        value: 'sl',
        label: '斯伦'
      },
      {
        value: 'bs',
        label: '贝谢'
      },
      {
        value: 'szdx',
        label: '旋转导向'
      },
      {
        value: 'bkxssb',
        label: '贝克休斯设备'
      }
    ]
  },
  {
    value: 'szcl_mwd',
    label: '随钻测量MWD型号',
    children: [
      {
        value: 'hlbd',
        label: '哈里伯顿'
      },
      {
        value: 'bench_tree',
        label: '海蓝'
      },
      {
        value: '6h',
        label: '六合'
      },
      {
        value: 'art',
        label: '奥瑞拓'
      }
    ]
  },
  {
    value: 'szcl_lwd',
    label: '随钻测量LWD型号',
    children: []
  },
  {
    value: 'jxyly',
    label: '井下压裂仪型号',
    children: [
      {
        value: 'sj2000',
        label: '四机2000'
      },
      {
        value: '2s2000',
        label: '双S2000'
      },
      {
        value: 'jereh2000',
        label: 'Jereh2000'
      },
      {
        value: 'jereh2500',
        label: 'Jereh2500'
      },
      {
        value: 'nov2500',
        label: 'NOV2500'
      },
      {
        value: 'bs2500',
        label: '宝石2500'
      }
    ]
  },
  {
    value: 'gjyq',
    label: '固井仪器型号',
    children: [
      {
        value: 'gjc44_21',
        label: 'GJC44-21'
      },
      {
        value: 'gjc55_28',
        label: 'GJC55-28'
      },
      {
        value: 'gjc75_30',
        label: 'GJC75-30'
      },
      {
        value: 'gjc85_28',
        label: 'GJC85-28'
      },
      {
        value: 'gjc100_30',
        label: 'GJC100-30'
      }
    ]
  },
  {
    value: 'syyq',
    label: '试油仪器型号',
    children: [
      {
        value: 'expro',
        label: 'EXPRO'
      },
      {
        value: 'bp',
        label: '博普'
      },
      {
        value: 'ses',
        label: '赛恩斯'
      }
    ]
  },
  {
    value: 'dhyq',
    label: '地化仪器型号',
    children: []
  }
]
const tableData = ref([
  {
    type: '每小时数据量',
    time0: '20',
    time1: '20',
    time2: '20',
    time3: '20',
    time4: '20',
    time5: '20',
    time6: '20',
    time7: '20',
    time8: '20',
    time9: '20',
    time10: '20',
    time11: '20',
    time12: '20',
    time13: '20',
    time14: '20',
    time15: '20',
    time16: '20',
    time17: '20',
    time18: '20',
    time19: '20',
    time20: '20',
    time21: '20',
    time22: '20',
    time23: '20',
    time24: '20',
    time25: '20',
    time26: '20',
    time27: '20',
    time28: '20',
    time29: '20',
    time30: '20'
  },
  {
    type: '当日累计数据量',
    time0: '20',
    time1: '20',
    time2: '20',
    time3: '20',
    time4: '20',
    time5: '20',
    time6: '20',
    time7: '20',
    time8: '20',
    time9: '20',
    time10: '20',
    time11: '20',
    time12: '20',
    time13: '20',
    time14: '20',
    time15: '20',
    time16: '20',
    time17: '20',
    time18: '20',
    time19: '20',
    time20: '20',
    time21: '20',
    time22: '20',
    time23: '20',
    time24: '20',
    time25: '20',
    time26: '20',
    time27: '20',
    time28: '20',
    time29: '20',
    time30: '20'
  }
])
const tableData1 = ref([
  {
    type: '每日数据量',
    time0: '20',
    time1: '20',
    time2: '20',
    time3: '20',
    time4: '20',
    time5: '20',
    time6: '20',
    time7: '20',
    time8: '20',
    time9: '20',
    time10: '20',
    time11: '20',
    time12: '20',
    time13: '20',
    time14: '20',
    time15: '20',
    time16: '20',
    time17: '20',
    time18: '20',
    time19: '20',
    time20: '20',
    time21: '20',
    time22: '20',
    time23: '20',
    time24: '20',
    time25: '20',
    time26: '20',
    time27: '20',
    time28: '20',
    time29: '20',
    time30: '20'
  },
  {
    type: '当月累计数据量',
    time0: '20',
    time1: '20',
    time2: '20',
    time3: '20',
    time4: '20',
    time5: '20',
    time6: '20',
    time7: '20',
    time8: '20',
    time9: '20',
    time10: '20',
    time11: '20',
    time12: '20',
    time13: '20',
    time14: '20',
    time15: '20',
    time16: '20',
    time17: '20',
    time18: '20',
    time19: '20',
    time20: '20',
    time21: '20',
    time22: '20',
    time23: '20',
    time24: '20',
    time25: '20',
    time26: '20',
    time27: '20',
    time28: '20',
    time29: '20',
    time30: '20'
  }
])
const tableData2 = ref([
  {
    type: '每月数据量',
    time0: '20',
    time1: '20',
    time2: '20',
    time3: '20',
    time4: '20',
    time5: '20',
    time6: '20',
    time7: '20',
    time8: '20',
    time9: '20',
    time10: '20',
    time11: '20',
    time12: '20',
    time13: '20',
    time14: '20',
    time15: '20',
    time16: '20',
    time17: '20',
    time18: '20',
    time19: '20',
    time20: '20',
    time21: '20',
    time22: '20',
    time23: '20',
    time24: '20',
    time25: '20',
    time26: '20',
    time27: '20',
    time28: '20',
    time29: '20',
    time30: '20'
  },
  {
    type: '当年累计数据量',
    time0: '20',
    time1: '20',
    time2: '20',
    time3: '20',
    time4: '20',
    time5: '20',
    time6: '20',
    time7: '20',
    time8: '20',
    time9: '20',
    time10: '20',
    time11: '20',
    time12: '20',
    time13: '20',
    time14: '20',
    time15: '20',
    time16: '20',
    time17: '20',
    time18: '20',
    time19: '20',
    time20: '20',
    time21: '20',
    time22: '20',
    time23: '20',
    time24: '20',
    time25: '20',
    time26: '20',
    time27: '20',
    time28: '20',
    time29: '20',
    time30: '20'
  }
])
const handleClick = (tab, event) => {
  activeNames.value = tab.props.name
}
</script>
